import React, { Component } from 'react';
import Store from '../Store';
import { observer } from 'mobx-react';
@observer
class Cart extends Component {
  de(item) {
    Store.delCart(item);
  }
  in(item) {
    Store.addCart(item);
  }
  del(item) {
    Store.del(item);
  }
  render() {
    let lis;
    try {
      lis = Store.cart.map(item => (
        <li key={item.id}>
          <span>商品名称:</span>
          <b>{item.title}</b>
          &nbsp; &nbsp;
          <span>商品价格:</span>
          <b>{item.price}</b>
          &nbsp; &nbsp;
          <span>商品数量:</span>
          <button onClick={this.de.bind(this, item)} disabled={item.count == 1 ? true : false }>
            -
          </button>
          &nbsp; &nbsp;
          <b>{item.count}</b>
          &nbsp; &nbsp;
          <button onClick={this.in.bind(this, item)}>+</button>
          &nbsp; &nbsp;
          <button onClick={this.del.bind(this, item)}>删除</button>
          &nbsp; &nbsp;
        </li>
      ));
    } catch (e) {}
    // console.log(Store.cart);

    return (
      <fieldset>
        <legend>购物车</legend>
        <ul>
          {lis.length ? lis : <h3>购物车空空如也</h3>}
          <h2>总价：{Store.total.toFixed(2)}</h2>
        </ul>
      </fieldset>
    );
  }
}

export default Cart;
